<template>
    <div>
        <div class="mvDetail-box">
        <!-- mv盒子 -->
        <div class="mv-box">
            <span class=" icon iconfont icon-arrow-left-bold" @click.stop="$router.go(-1)"></span>
            <span class="detail">{{mvdetail.name}}</span>
            <video controls autoplay :src="mvUrl"></video>
        </div>
        <!-- 作者或歌手 -->
        <div class="img-name">
            <div class="img"><img :src="mvdetail.cover" alt=""></div>
            <div class="right">
                <div class="nickname">{{mvdetail.artistName}}</div>
                <div class="fans">{{mvdetail.subCount}}粉丝</div>
            </div>
        </div>
        <!-- 介绍 -->
        <div class="introduction">{{mvdetail.desc}}</div>
        <!-- 播放次数和时间 -->
        <div class="num-time">
           <span>{{mvdetail.playCount | num}}次播放</span>
           <span>{{mvdetail.publishTime}}</span>
        </div>
        <!-- 推荐mv -->
        <div class="recommend">
            <div class="mv-header">
                <span>相似mv</span>
            </div>
            <ul>
                <li v-for="(item,index) in simiMvlist" :key="index" @click="changemv(item.id)">
                    <div class="img"><img :src="item.cover" alt=""></div>
                    <div class="right">
                        <div class="r-introduction">{{item.name}}</div>
                        <div class="r-num">{{item.playCount}}次播放</div>
                    </div>
                </li>
              
            </ul>
        </div>
        <!-- 评论 -->
        <div class="comment-box" id="pinlun">
            <div class="mv-header">
                <span>热门评论</span>
            </div>
            <ul>
                <!-- 热门评论 -->
                <li v-for="item in hotcommentlist" :key="item.commentId">
                    <div class="c-header">
                        <div class="img"><img :src="item.user.avatarUrl" alt=""></div>
                        <div class="right">
                            <div class="hot">{{item.user.nickname}}</div>
                            <div :class="{'active':commentflag == item.liked}" @click="comment(item.commentId)">
                                <span class="num">{{item.likedCount}}</span>
                                <span :class="['icon','iconfont','icon-dianzan']"></span>
                            </div>
                        </div>
                    </div>
                    <div class="content">{{item.content}}</div>
                    <div class="time">{{item.time | time}}</div>
                </li>
                <!-- 普通评论 -->
                <li v-for="(item,index) in commentlist" :key="index">
                    <div class="c-header">
                        <div class="img"><img :src="item.user.avatarUrl" alt=""></div>
                        <div class="right">
                            <div>{{item.user.nickname}}</div>
                            <div :class="{'active':commentflag == item.liked}" @click="comment2(item.commentId)">
                                <span class="num">{{item.likedCount}}</span>
                                <span :class="['icon','iconfont','icon-dianzan']"></span>
                            </div>
                        </div>
                    </div>
                    <div class="content">{{item.content}}</div>
                    <div class="time">{{item.time | time}}</div>
                </li>
            </ul>
        </div>
        <!-- 底部导航 -->
        <div class="mvDetail-box-bottom">
            <input type="text" placeholder="写评论" @focus="flag = true;" :class="[{'chang':flag}]" v-model="value">
            <a :class="['iconfont','icon-xinxi',{'active':flag}]" href="#pinlun"></a>
            <span :class="['iconfont','icon-xingxing','star',{'active':flag},{'starcolor':starflag}]" @click="shouchang"></span>
            <span :class="['iconfont','icon-dianzan1','zan',{'active':flag},{'zancolor':zanflag}]" @click="mvzan"></span>
            <span :class="['iconfont','icon-cuo','cuo',{'show':flag}]" @click="flag=false"></span>
            <button :class="{'show':flag}" @click.stop="submit">提交</button>
        </div>
    </div>
    </div>
</template>

<script>
    // ,getCommentLike,getResourceLike,getMvSub
    import {getMvUrl,getCommentMv,getMvDetail,getSimiMv,getComment} from "../../api/mv"
    import { Notify } from 'vant';
    export default {
        data() {
            return {
                mvUrl:null,//mv播放路径
                commentlist:[],//普通评论列表
                hotcommentlist:[],//热门评论列表
                mvdetail:[],//mv详情
                simiMvlist:[],//相似mv列表
                mvid:null,//mv的id
                flag:false,//控制底部input标签
                // commentnum:null,//评论点赞控制样式
                commentflag:true,//评论点赞控制样式 未选中状态
                zanflag:false,//mv点赞
                starflag:false,//mv收藏
                value:'',//发送评论的内容
                index:null,//热门评论的下标
                index2:null,//普通评论的下标
                cid1:null,//热门评论id
                cid2:null,//普通评论id
            }
        },
        methods: {
            // 发送评论
            submit(){
                getComment({
                    t:1,
                    type:1,
                    id:this.mvid,
                    content:this.value,
                    cookie:window.localStorage.getItem('login')
                })
                Notify({
                        message: '发送评论成功',
                        color: 'white',
                        background: '#1989fa',
                });
                this.value = '';
                this.flag = true;
            },
            // mv收藏
            shouchang(){
                this.starflag = !this.starflag 
                if(this.starflag){
                    Notify({
                        message: '收藏成功',
                        color: 'white',
                        background: '#1989fa',
                    });
                }else{
                    Notify({
                        message: '取消收藏成功',
                        color: 'white',
                        background: '#1989fa',
                    }); 
                }
            },
            // mv点赞
            mvzan(){
                this.zanflag = !this.zanflag
                if(this.zanflag){
                    Notify({
                        message: '点赞成功',
                        color: 'white',
                        background: '#1989fa',
                    });
                }else{
                    Notify({
                        message: '取消点赞成功',
                        color: 'white',
                        background: '#1989fa',
                    }); 
                }
            },
            // 评论点赞
            comment(id){
                this.cid1 = id;
                this.index = this.hotcommentlist.findIndex(item => item.commentId == id)
                this.hotcommentlist[this.index].liked = !this.hotcommentlist[this.index].liked
                if(this.hotcommentlist[this.index].liked){
                    this.hotcommentlist[this.index].likedCount += 1;
                    Notify({
                        message: '点赞成功',
                        color: 'white',
                        background: '#1989fa',
                    });
                }else{
                    this.hotcommentlist[this.index].likedCount -= 1;
                        Notify({
                        message: '取消点赞成功',
                        color: 'white',
                        background: '#1989fa',
                    }); 
                }
            },
            comment2(id){
                this.cid2 = id ;
                this.index2 = this.commentlist.findIndex(item => item.commentId == id)
                this.commentlist[this.index2].liked = !this.commentlist[this.index2].liked
                if(this.commentlist[this.index2].liked){
                    this.commentlist[this.index2].likedCount += 1;
                    Notify({
                        message: '点赞成功',
                        color: 'white',
                        background: '#1989fa',
                    });
                }else{
                    this.commentlist[this.index2].likedCount -= 1;
                        Notify({
                        message: '取消点赞成功',
                        color: 'white',
                        background: '#1989fa',
                    }); 
                }
            },
            // 切换mv
            changemv(id){
                    // 获取mv地址
            getMvUrl({id:id}).then(data=>{
                this.mvUrl = data.data.url;
            }),
            // 获取mv评论
            getCommentMv({id:id}).then(data=>{
                this.commentlist = data.comments
                this.hotcommentlist = data.hotComments
            }),
            // 获取mv详情
            getMvDetail({mvid:id}).then(data=>{
                this.mvdetail = data.data
            }),
            // 相似mv
            getSimiMv({mvid:id}).then(data=>{
                this.simiMvlist = data.mvs
            })
            }
        },
        created(){
            this.mvid = parseInt(this.$route.query.id)
            // 获取mv地址
            getMvUrl({id:this.mvid}).then(data=>{
                this.mvUrl = data.data.url;
            }),
            // 获取mv评论
            getCommentMv({id:this.mvid}).then(data=>{
                this.commentlist = data.comments
                this.hotcommentlist = data.hotComments
            }),
            // 获取mv详情
            getMvDetail({mvid:this.mvid}).then(data=>{
                this.mvdetail = data.data
            }),
            // 相似mv
            getSimiMv({mvid:this.mvid}).then(data=>{
                this.simiMvlist = data.mvs
            })
            
        },
        beforeDestroy(){
            // console.log(this.commentlist[this.index2]);
            // console.log(this.hotcommentlist[this.index]);
            // // mv收藏
            // if(this.starflag){
            //     getMvSub({
            //             mvid:this.mvid,
            //             t:1,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }else if(!this.starflag){
            //     getMvSub({
            //             mvid:this.mvid,
            //             t:0,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }
            // // mv点赞
            // if(this.zanflag){
            //     getResourceLike({
            //             t:1,
            //             type:1,
            //             id:this.mvid,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }else if(!this.zanflag){
            //     getResourceLike({
            //             t:0,
            //             type:1,
            //             id:this.mvid,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }
            // // 热门评论点赞
            // if(this.hotcommentlist[this.index].liked){
            //     getCommentLike({
            //             id:this.mvid,
            //             cid:this.cid1,
            //             t:1,
            //             type:1,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }else if(!this.hotcommentlist[this.index].liked){
            //     getCommentLike({
            //             id:this.mvid,
            //             cid:this.cid1,
            //             t:0,
            //             type:1,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }
            // // 普通评论点赞
            // if(this.commentlist[this.index2].liked){
            //     getCommentLike({
            //             id:this.mvid,
            //             cid:this.cid2,
            //             t:1,
            //             type:1,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }else if(!this.commentlist[this.index2].liked){
            //     getCommentLike({
            //             id:this.mvid,
            //             cid:this.cid2,
            //             t:0,
            //             type:1,
            //             cookie:window.localStorage.getItem('login')
            //         })
            // }
        },
        filters:{
            num(value){
                let w = value > 10000 ? value/10000 : value;
                let y = w > 10000 ? parseInt(w/10000) + "亿" : parseInt(w) + "万";
                return y;
            },
            time(value){
                let date = new Date(value)
                let Y = date.getFullYear()+"-"
                let M = date.getMonth()+1 < 10?'0'+(date.getMonth()+1)+"-":date.getMonth()+1+"-"
                let D = date.getDate() < 10 ? '0'+date.getDate()+" ":date.getDate()+" "
                let h = date.getHours() < 10 ?'0'+date.getHours() +":":date.getHours()+":"
                let m = date.getMinutes() < 10 ?'0'+date.getMinutes() +":":date.getMinutes()+":"
                let s = date.getSeconds() < 10? '0'+date.getSeconds():date.getSeconds();
                return Y+M+D+h+m+s;
            }
        }
    }
</script>

<style lang="less">
.mvDetail-box{
    min-width: 320px;
    max-width: 750px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin:auto;
    background-color: white;
    overflow:hidden;
    z-index: 1501;
    // mv盒子
    .mv-box{
        width: 100%;
        margin: 0;
        position: relative;
        .icon{
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 35px;
            height: 35px;
            text-align: center;
            line-height: 35px ;
            font-size: 20px;
            color:white;
            z-index: 1502;
        }
        .detail{
            display: inline-block;
            width: calc(100% - 90px);
            height: 35px;
            text-align: center;
            line-height: 35px;
            color: white;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 45px;
            opacity: 0.8;
        }
        video{
            width: 100%;
        }
    }
    // 作者或歌手
    .img-name{
        width: 93%;
        margin: 0 auto;
        display: flex;
        padding-top: 10px;
        position: relative;
        .img{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #e7021e;
            position:relative;
            img{
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
        }
        .right{
            margin-left: 10px;
            position: relative;
            width: calc(100% - 45px);
            .nickname{
                width:100%;
                font-size: 13px;
                color: #222;
                height: 13px;
                line-height: 13px;
                position: absolute;
                top: 4px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-weight: 600;
            }
            .fans{
                width:100%;
                font-size: 12px;
                color: #939393;
                height:12px;
                line-height: 12px;
                margin-top: 19px;
            }
        }
        .time{
            position:absolute;
            font-size: 12px;
            color: #939393;
            top: 10px;
            right: 0;
        }
    }
    // 介绍
    .introduction{
        width: 93%;
        margin: 10px auto 0;
        font-size: 16px;
        line-height: 25px;
        color: #111;
        font-weight: 600;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    // 播放次数和时间
    .num-time{
        width: 93%;
        margin: 5px auto 0;
        font-size: 12px;
        color: #898989;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    // 推荐mv
    .recommend{
        width: 93%;
        margin: 10px auto 0;
        .mv-header{
            width: 100%;
            margin: 18px 0;
            background-color: rgba(238, 227, 227,0.2);
            span{
                padding:0 10px;
                font-size: 15px;
                color: #111;
                border-left:2px solid #e7021e ;
                font-weight: 700;
            }
        }
        ul{
            li{
                display: flex;
                margin-bottom: 18px;
                .img{
                    width: 115px;
                    height: 65px;
                    position: relative;
                    margin-right: 25px;
                    background-color: #e7021e;
                    img{
                        display: block;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }
                .right{
                width: calc(100% - 140px);
                height: 60px;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                .r-introduction{
                    width: 100%;
                    font-size: 16px;
                    line-height: 25px;
                    color: #111;
                    font-weight: 600;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .r-num{
                    width: 100%;
                    font-size: 12px;
                    color: #898989;
                }
                }
            }
        }
    }
    // 评论
    .comment-box{
        width: 93%;
        margin: 10px auto 0;
        .mv-header{
            width: 100%;
            margin: 18px 0;
            background-color: rgba(238, 227, 227,0.2);
            span{
                padding:0 10px;
                font-size: 15px;
                color: #111;
                border-left:2px solid #e7021e ;
                font-weight: 700;
            }
        }
        ul{
            li{
                margin-bottom: 20px;
                // &:nth-last-child(1){
                //     padding-bottom: 63px;
                // }
                .c-header{
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    .img{
                        width: 30px;
                        height: 30px;
                        position: relative;
                        border-radius: 50%;
                        overflow: hidden;
                        background-color: #e7021e;
                        img{
                            width: 100%;
                            border-radius: 50%;
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            margin: auto;
                        }
                    }
                    .right{
                        height: 30px;
                        width: calc(100% - 42px);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        div:nth-child(1){
                            font-size: 12px;
                            color: #333;
                        }
                        div:nth-child(2){
                            color: #333;
                            font-size: 12px;
                            &.active{
                                color:#d43c33;
                            }
                        }
                        .hot::after{
                            content: "热";
                            font-size: 12px;
                            padding: 1px;
                            border-radius: 5px;
                            background-color: #d43c33;
                            color:white;
                            margin-left: 10px;
                        }
                    }
                }
                .content{
                    width: calc(100% - 42px);
                    padding-left: 42px;
                    font-size: 16px;
                    margin: 8px 0;
                    color: #111;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .time{
                    width: calc(100% - 42px);
                    margin-left: 42px;
                    font-size: 12px;
                    color: rgb(184, 184, 184);
                }
            }
        }
    }
    // 底部导航
    .mvDetail-box-bottom{
        min-width: 320px;
        max-width: 750px;
        height: 43px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        box-shadow: 0 0 5px #aaa;
        background-color: white;
        display: flex;
        align-items: center;
        input{
            width: 60%;
            height: 30px;
            border-radius: 15px;
            background-color: #e3e4e6;
            text-indent: 15px;
            transition: all 1s;
            margin-left: 12px;
        }
        .chang{
            width: 94%;
        }
        a,.star,.zan{
            font-size: 24px;
            margin-left: 5%;
        }
        .zan{
            font-size: 22px;
        }
        .starcolor{
            color:#e7021e ;
        }
        .zancolor{
            color:#e7021e ;
        }
        .active{
            display: none;
        }
        button{
            display: none;
            width:50px;
            height: 30px;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
            background-color: #d43c33;
            color: white;
            opacity: 0;
            transition: all 2s;
            margin-left: 12px;
            position: absolute;
            right: 2%;
            top:6.5px;
        }
        .cuo{
            height: 30px;
            line-height: 30px;
            color: rgb(82, 81, 81);
            position: absolute;
            right: 17%;
            top:6.5px;
            display: none;
            opacity: 0;
        }
        .show{
            opacity: 1;
            display: block;
        }
    }
}
</style>